<template>
	<el-container>
		<el-aside width="220px">
			<el-tree @node-click="treeClick" ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false">
			</el-tree>
		</el-aside>
		<el-container>
			<el-main class="nopadding">
				<el-container>
					<el-header>
						<div class="left-panel">
							<el-date-picker type="daterange" value-format="YYYY-MM-DD" @change="selectTime" v-model="date" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</div>
						<div class="right-panel">
							<div class="right-panel-search">
								<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
								<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							</div>
						</div>
					</el-header>
					<el-header style="height:150px;" v-if="false">
						<scEcharts height="100%" :option="logsChartOption"></scEcharts>
					</el-header>
					<el-main class="nopadding">
						<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
							<el-table-column label="级别" prop="level" width="60">
								<template #default="scope">
									<el-icon v-if="scope.row.level=='error'" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
									<el-icon v-if="scope.row.level=='warn'" style="color: #E6A23C;"><el-icon-warning-filled /></el-icon>
									<el-icon v-if="scope.row.level=='info'" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
								</template>
							</el-table-column>
							<el-table-column label="ID" prop="id" width="150"></el-table-column>
							<el-table-column label="日志类型" prop="action" width="120"></el-table-column>
							<el-table-column label="数据模型" prop="model" width="150"></el-table-column>
							<el-table-column label="数据模型ID" prop="model_id" width="150"></el-table-column>
							<el-table-column label="事件" prop="event" width="120"></el-table-column>
							<el-table-column label="请求接口" prop="path" width="180"></el-table-column>
							<el-table-column label="请求方法" prop="method" width="120"></el-table-column>
							<el-table-column label="操作人" prop="user.name" width="120"></el-table-column>
							<el-table-column label="客户端IP" prop="ip" width="120"></el-table-column>
							<el-table-column label="日志时间" prop="created_at" width="170"></el-table-column>
						</scTable>
					</el-main>
				</el-container>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
		<info ref="info"></info>
	</el-drawer>
</template>

<script>
	import info from './info'
	import scEcharts from '@/components/scEcharts'

	export default {
		name: 'log',
		components: {
			info,
			scEcharts
		},
		data() {
			return {
				level: '',
				infoDrawer: false,
				category: [
					{
						label: '系统日志',
						children: [
							{label: 'info'},
							{label: 'warn'},
							{label: 'error'}
						]
					}
				],
				date: [],
				apiObj: this.$API.system.log.list,
				search: {
					keyword: ""
				}
			}
		},
		methods: {
			upsearch(){
				this.$refs.table.reload({
					date:this.date,
					level:this.level,
					keyword: this.search.keyword
				})
			},
			selectTime(){
				this.upsearch();
			},
			treeClick(row){
				this.level = row.label == '系统日志' ? '' : row.label;
				this.upsearch()
			},
			rowClick(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			}
		}
	}
</script>

<style>
</style>
